<template>
	<view class="content">
		<movable-area class="movableArea">
			<movable-view :x="state.x" :y="state.y" @click="serviceHelp" @change='movableChange' @touchend="moableEnd"
				class="movableView" direction='all'>
				客服<view></view>帮找
			</movable-view>
			<scroll-view @scrolltolower="reachBottom" scroll-y="true" style="height: 100%;">
				<goodsList :data='state.goods'></goodsList>
				<safeBottom></safeBottom>
			</scroll-view>
			<callServiceHelp ref="callServiceHelpRef"></callServiceHelp>
		</movable-area>
	</view>
</template>

<script setup>
	import {
		onRenderTracked,
		reactive,
		ref
	} from "vue";
	import {
		chooseImage,
		imageToBase64
	} from '@/utils/publicFuns.js'
	import {
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import request from '@/utils/request.js'
	const state = reactive({
		goods: [],
		isEnd: false,
		loading: false,
		params: {
			imgBase64: '',
			page: 0,
			count: 50
		},
		x: 500,
		y: 505,
		windowInfo: ''
	})
	onReady(() => {
		state.windowInfo = uni.getSystemInfoSync().safeArea
		console.log(state.windowInfo, 'windowInfo')
	})
	const movableChange = ({
		detail: {
			x,
			y,
			source
		}
	}) => {
		uni.$u.debounce(() => {
			if (source === 'touch') {
				state.x = x
				state.y = y
			}
		}, 50)
	}
	const moableEnd = () => {
		setTimeout(() => {
			const {
				width,
				height,
				top,
				bottom,
				left,
				right
			} = state.windowInfo
			if (state.x <= width / 2) {
				state.x = left
			} else if (state.x > width / 2) {
				state.x = right
			}
			if (state.y <= height * 0.2) {
				state.y = height * 0.2
			} else if (state.y > height * 0.8) {
				state.y = height * 0.8
			}
		}, 300)
	}
	// 客服帮找
	const callServiceHelpRef = ref(null)
	const serviceHelp = () => {
		callServiceHelpRef.value.show()
	}
	const getList = () => {
		uni.showLoading({
			title: '加载中...'
		})
		state.loading = true;
		request({
			url: 'api/goods/imgSearchByImg',
			data: state.params,
			toast: false
		}).then(res => {
			if (state.params.page === 0) {
				state.goods = res;
			} else {
				state.goods = [...state.goods, ...res]
			}
			state.isEnd = res.length < state.params.count;
			if (!state.isEnd) state.params.page++;
			state.loading = false;
			uni.hideLoading()
		}).catch(err => {
			state.loading = false;
			uni.hideLoading()
		})
	}
	// 保存图片
	const savePcture = () => {
		request({
			url: 'api/goods/imgSearchAdd',
			needLogin: true,
			data: {
				imgBase64: state.params.imgBase64
			},
		})
	}
	const searchProductByPicture = () => {
		chooseImage().then(async res => {
			console.log(res, 'ress')
			state.isEnd = false;
			state.params.page = 0
			// #ifdef H5
			const {
				base64,
				path
			} = await imageToBase64(res.files[0])
			state.params.imgBase64 = base64
			// #endif
			// #ifdef MP-WEIXIN
			const {
				base64,
				path
			} = await imageToBase64(res[0])
			state.params.imgBase64 = base64
			// #endif
			// // #ifdef H5
			// state.params.imgBase64 = await imageToBase64(res.files[0])
			// // #endif
			// // #ifdef MP-WEIXIN
			// state.params.imgBase64 = await imageToBase64(res[0])
			// // #endif
			getList()
			savePcture()
		}).catch(err => {
			console.log(err, 'errr')
			uni.navigateBack()
		})
	}
	const reachBottom = () => {
		if (state.isEnd || state.loading) return;
		getList()
	}
	// onReachBottom(() => {
	// 	if(state.isEnd || state.loading) return;
	// })
	onReady(() => {
		searchProductByPicture()
	})
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		// height: calc(100vh - 60rpx);
		height: 100vh;
		box-sizing: border-box;
		/* #ifdef H5 */
		height: calc(100vh - 44px);

		/* #endif */
		.movableArea {
			height: 100%;
			width: 100%;
			box-sizing: border-box;

			.movableView {
				$s: 80rpx;
				width: $s;
				height: $s;
				text-align: center;
				line-height: math.div($s, 2);
				z-index: 10;
				background-color: $main-color;
				font-weight: 600;
				font-size: 28rpx;
				color: #fff;
				border-radius: 8rpx;
			}
		}
	}
</style>